<template>
  <div class="continue">
    <h1>个人规划</h1>
    <div class="cont">
      <h2>项目实践-"在磨砺中成长"</h2>
      <span
        >从大二开始就接触前端开发，从模仿小米和京东网页，到自己开发塔罗占卜
        小程序，再到现在使用Vue框架和node开发后台管理系统和App等中大型应用；</span
      >
    </div>
    <div class="cont">
      <h2>学习安排-"每天进步一点点"</h2>
      <span>
        学校的学习使我，不断求知。在线下的学习也让我快速成长。接下来，到工作中我依旧会通过视频，开源社区，书籍等渠道不断充实前端知识。我深知，这仅仅只是我从事开发生涯的开始。
      </span>
    </div>
    <div class="cont">
      <h2>未来规划-"你将离我越来越进"</h2>
      <span>
        目前自己的仍处于学习的阶段，还有很多地方等待深究。未来我将搭建自己的博客，分享更多自己的心得。这一两年希望可以专注于自身技术的提高，不断适应业务的需求和变化。同时也会积极交流，融入团队开发；前端现在已经往大前端发展，会有很多新奇的技术，我将在工作中不断磨砺自己，争取做出更大的业绩。
      </span>
    </div>
    <img class="huojian" src="../assets/img/huojian.png" alt="" />
    <div class="line1"></div>
    <div class="line2"></div>
    <div class="line3"></div>
    <div class="line4"></div>
  </div>
</template>

<script></script>

<style>
.continue {
  border: 2px solid skyblue;
  margin: 0 auto;
}

.continue .cont {
  border: 1px solid red;
  margin: 20px;
  border-radius: 10px;
  padding: 10px;
}

.continue h1 {
  text-align: center;
  margin: 10px;
}
.continue h2 {
  /* text-align: center; */
  text-indent: 2em;
  margin: 20px;
}
.continue span {
  display: inline-block;
  text-indent: 2em;
  font-size: 16px;
  line-height: 30px;
}
.huojian {
  position: absolute;
  top: 35%;
  left: 70%;
  animation: zd 0.4s linear 0s infinite alternate;
  /* animation: zd .4s linear 0s infinite normal; */
}

@keyframes zd {
  from {
    transform: translateX(-20px) translateY(-20px);
  }
  to {
    transform: translateX(20px) translateY(20px);
  }
}

.line1 {
  width: 2px;
  height: 166px;
  background-color: blue;
  position: absolute;
  top: 35%;
  left: 70%;
  transform: rotate(45deg);
  animation: yd 1s linear 0s infinite;
  opacity: 0;
}
.line2 {
  width: 2px;
  height: 266px;
  background-color: blue;
  position: absolute;
  top: 36%;
  left: 71%;
  transform: rotate(45deg);
  animation: yd 1s linear 0.4s infinite;
  opacity: 0;
}
.line3 {
  width: 2px;
  height: 266px;
  background-color: rgb(29, 216, 169);
  position: absolute;
  top: 37%;
  left: 72%;
  transform: rotate(45deg);
  animation: yd 1s linear 0.68s infinite;
  opacity: 0;
}
.line4 {
  width: 2px;
  height: 266px;
  background-color: rgb(165, 99, 23);
  position: absolute;
  top: 38%;
  left: 73%;
  transform: rotate(45deg);
  animation: yd 1s linear 0.2s infinite;
  opacity: 0;
}
@keyframes yd {
  0% {
    transform: rotate(45deg) translateY(-300px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(45deg) translateY(300px);
    opacity: 0;
  }
}
</style>
